<template>
	<view class="wrap-x bg-white ">
		<view class="wrap-y" style="width: 50vw;">
			<view class="title">属性设置区</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">float布局：</view>
			</view>
			<radio-group class="margin-top-sm" @change="changeOverflow">
				<radio value="none">none</radio>
				<radio value="left">left</radio>
				<radio value="right">right</radio>
				<!-- 				<radio value="both">both</radio>
				<radio value="inline-start">inline-start</radio>
				<radio value="inline-end">inline-end</radio> -->
			</radio-group>
			<!-- 		<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">清除clear：</view>
			</view>
			<radio-group class="margin-top-sm" @change="changeClear">
				<radio value="none">none</radio>
				<radio value="left">left</radio>
				<radio value="right">right</radio>

			</radio-group> -->


		</view>

		<view style="width:50vw;">
			<view class="title">布局效果预览区</view>
			<view class="dashed">
				<view style="width: 90%;height: 750px;margin: 20rpx;background-color: #eee;" :style="{clear:clear}">
					<img :style="{float:float}" src="../static/banner-about.jpg"
						style="width: 200px;height: 120px;"></img>
					<p>CSSfloat是一种定位属性，它将元素放置在其容器的左侧或右侧，并允许内联元素环绕它。过去，float它因被滥用于页面布局而声名狼藉。这导致一些开发人员质疑它现在是否已弃用，还是应该完全避免！
					</p>
					<p>CSSfloat仍然是相关的。我们应该在正确的上下文中使用它！本文讨论了 CSS 浮动的历史，并展示了float可用于现代网页设计的几种方法，以实现创意文本布局和令人惊叹的设计元素。</p>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: 'project2',
		props: {},
		data() {
			return {
				float: 'inline-start',
				position: 'static',
				overflow: 'visible',
				zindex: 0,
				bgColor: '#34daaa',
				borderColor: '#ff5500',
				width: 100,
				height: 1000,
				margin: 0,
				padding: 0,
				border: 0,
				border_radiu: 0,
				box_shadow1: 0,
				box_shadow2: 0,
				box_shadow3: 0,
				box_shadow4: '#000000',
				box_shadow5: 0,
				right: 0,
				left: 0,
				bottom: 0,
				top: 0,
				clear: '',
			}
		},
		methods: {
			clearfloat() {
				this.position = value.detail.value;
			},
			changeOverflow(value) {
				this.float = value.detail.value;
			},
			changeClear(value) {
				this.clear = value.detail.value;
			},
		}
	}
</script>

<style lang="scss">
	radio {
		margin-left: 20px;
	}

	.title {
		font-weight: 600;
		color: red;
		font-size: 40rpx;
		text-align: center;
	}

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30rpx;

		.label {
			font-size: 30rpx;
			color: black;
			margin-right: 20rpx;
		}

		.input {
			font-size: 30rpx;
			color: black;
			width: 80px;
			border: 1rpx solid #eee;
			padding: 8rpx 10rpx;
		}
	}
</style>